<template>
    <div class="container">
      <div class="stars"></div>
      <div class="error-message">
        <div class="error-text">404</div>
        <p>您要找的页面可能已被吸入黑洞...</p>
        <router-link to="/" class="home-button">赶紧逃回首页</router-link>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  // 留空，此组件无需动态数据或逻辑
  </script>
  
  <style scoped>
  .container {
    position: relative;
    overflow: hidden;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: radial-gradient(circle, #000 0%, #000 50%, #040d26 100%);
  }
  
  .stars {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(@/assets/img/404-bg.png);
    animation: starsMove 100s linear infinite;
  }
  
  @keyframes starsMove {
    from { background-position: 0 0; }
    to { background-position: 10000px 10000px; }
  }
  
  .error-message {
    z-index: 2;
    color: #fff;
    text-align: center;
  }
  
  .error-text {
    font-size: 12em;
    font-weight: bold;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de;
    animation: glow 2s ease-in-out infinite alternate;
  }
  
  @keyframes glow {
    from {
      text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #ff00de, 0 0 20px #ff00de, 0 0 25px #ff00de, 0 0 30px #ff00de, 0 0 35px #ff00de;
    }
    to {
      text-shadow: 0 0 20px #fff, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de;
    }
  }
  
  .error-message p {
    font-size: 2em;
    margin: 20px 0;
  }
  
  .home-button {
    padding: 10px 20px;
    font-size: 1em;
    color: #fff;
    background: #ff00de;
    border-radius: 4px;
    text-decoration: none;
    animation: glow 2s ease-in-out infinite alternate;
  }
  
  .home-button:hover {
    background: #ff5fe7;
  }
  </style>
  